<!--
 * @Description: 增值服务费调用设置
 * @Author: liyujie
 * @Date: 2021/8/31
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/08/31
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <!-- header -->
            <page-header title="增值服务费调用设置">
                <template slot="header-right">
                    <div
                        class="back"
                        @click="handleRoute('hireList')"
                    >返回</div>
                </template>
            </page-header>
            <div>
                <div class="form-view">
                    <!--表单-->
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        label-position="right"
                        ref="ruleForm"
                        label-width="192px"
                        class="form-wrap"
                        :disabled="type === 'detail'"
                        @submit.native.prevent
                    >
                        <el-form-item
                            label="支持调用的商家"
                            label-width="206px"
                            class="is-required"
                        >
                            <el-radio-group v-model="ruleForm.type">
                                <el-radio :label="1">部分支持</el-radio>
                            </el-radio-group>
                            <div
                                class="form-tips"
                                style="margin-top: -10px"
                            >仅选中的商家，才支持去申请调用增值服务费</div>
                        </el-form-item>
                        <el-form-item
                            label-width="206px"
                            v-if="ruleForm.type === 1"
                            style="margin-top: -12px"
                        >
                            <div class="shop-wrapper">
                                <div class="shop-header">已选商家</div>
                                <div
                                    class="shop-content"
                                    v-if="ruleForm.shop_nos.length"
                                >
                                    <div class="btn-view">
                                        <div class="filter-view">
                                            <el-input
                                                v-model="inputShopName"
                                                size="medium"
                                                clearable
                                                placeholder="输入商家名称"
                                            />
                                        </div>
                                        <el-button
                                            type="primary"
                                            size="medium"
                                            @click="handleSelectShop('edit')"
                                        >修改已选商家</el-button>
                                    </div>
                                    <div class="table-wrapper">
                                        <el-table :data="pageData">
                                            <el-table-column
                                                label="序号"
                                                type="index"
                                                width="80"
                                                align="center"
                                            />
                                            <el-table-column
                                                prop="shop_title"
                                                label="商家名称"
                                            />
                                            <el-table-column
                                                label="操作"
                                                align="center"
                                            >
                                                <template slot-scope="scope">
                                                    <el-button
                                                        type="text"
                                                        @click="handleRemove(scope.row)"
                                                    >移除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <div class="table-footer">
                                        <div>
                                            已选商家<span class="count">（{{ ruleForm.shop_nos.length }}）</span>
                                        </div>
                                        <div class="pagination">
                                            <el-pagination
                                                layout="prev, pager, next"
                                                :current-page.sync="page.now_page"
                                                :total="page.total_count"
                                                :page-size="page.page_size"
                                                @current-change="getPageData"
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="shop-content-empty"
                                    v-else
                                >
                                    <div class="empty-title">当前没有选择商家哦～</div>
                                    <div class="empty-sub-title">请点击下方按钮，选择部分支持调用增值服务费的商家</div>
                                    <div
                                        class="empty-btn"
                                        @click="handleSelectShop"
                                    >选择商家</div>
                                </div>
                            </div>
                        </el-form-item>
                        <!--v2.1.8隐藏-->
                        <!--<el-form-item
                            label="调用协议"
                            label-width="206px"
                        >
                            <ueditor
                                :default-value="ruleForm.content"
                                ref="ueditor"
                                style="width: 862px"
                            />
                        </el-form-item>
                        <el-form-item label-width="206px">
                            <div
                                class="form-tips"
                                style="width: 862px"
                            >
                                <span>注意：在输入调用协议的时候请仔细编写协议的段落样式，此处设置的段落样式、文案样式将会在商家调用增值服务费的时候显示；</span>
                                <el-button
                                    size="medium"
                                    @click="handlePreview"
                                >
                                    预览协议
                                </el-button>
                            </div>
                        </el-form-item>-->
                    </el-form>
                </div>

                <!-- button -->
                <div class="footer">
                    <el-button
                        size="medium"
                        type="default"
                        @click="handleCancel()"
                    >
                        返回
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        v-if="type !== 'detail'"
                        @click="handleSubmit()"
                    >
                        保存
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        v-if="type === 'detail'"
                        @click="handleEdit"
                    >
                        编辑
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import ueditor from '@/components/common/ueditor.vue';
import {deepClone} from "@/assets/js/utils";
import ImageUpload from "@/components/common/image-upload";
import {shopSelectDialog} from '@/components/shop-manage/shop-select';

const numberReg = /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/;

export default {
    name: 'VasMoneyConfig',
    data() {
        return {
            // edit编辑 detail查看
            type: 'edit',
            ruleForm: {
                // 协议
                content: '',
                // 报名店铺限制类型 0不限 1部分
                type: 1,
                shop_nos: []
            },
            inputShopName: '',
            pageData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            rules: {
                content: [
                    {required: true, message: '请填写调用协议', trigger: 'blur'},
                ],
            },
            authResult: {}
        };
    },
    mixins: [back],
    watch: {
        filterShop(val) {
            this.getPageData();
        }
    },
    components: {ImageUpload, ueditor},
    mounted() {
        this.init();
    },
    computed: {
        filterShop() {
            return this.ruleForm.shop_nos.filter(item => {
                return item.shop_title.includes(this.inputShopName);
            });
        }
    },
    filters: {},
    methods: {
        /**
         * @description 页面初始化
         */
        init() {
            this.$store.commit('SET_HEADER', [{title: "官网"}, {title: '企业数据列表', path: '/bid/hire-list'}, {title: '增值服务费调用设置'}]);
            this.authResult = this.$route.meta.authResult;
            this.getConfig();
        },

        /**
         * 获取
         */
        getConfig() {
            this.$post('/student/shop_vas_money%5Cget_config', {}, resp => {
                if (resp.code === 1) {
                    this.ruleForm.shop_nos = resp.data.shop_list;
                    // this.$nextTick(() => {
                    //     this.$refs.ueditor.setContent(resp.data.content);
                    // });
                    this.getPageData();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 提交
         */
        handleSubmit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    // this.ruleForm.content = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';
                    let params = deepClone(this.ruleForm);

                    // if(!params.content) {
                    //     this.$notify({
                    //         title: '提示',
                    //         message: '调用协议不能为空',
                    //         type: 'warning'
                    //     });
                    //     return;
                    // }
                    params.shop_nos = params.shop_nos.map(item => {
                        return item.shop_no;
                    }).join();

                    this.$post('/student/shop_vas_money%5Cset_config', params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.$router.push({
                                name: 'hireList'
                            });
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                } else {
                    // 校验不通过
                    if(document.getElementsByClassName('el-form-item__error').length > 0){
                        this.$notify.warning({
                            title: '提示',
                            message: document.getElementsByClassName('el-form-item__error')[0].innerText
                        });
                    }
                    return false;
                }
            });
        },

        /**
         * @description 返回
         */
        handleCancel() {
            if (this.type === 'detail') {
                this.$router.push({
                    name: 'hireList'
                });
            } else {
                this.$zdConfirm('离开此页面后，已填写的信息将不会保存，确认离开此页面吗？', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push({
                        name: 'hireList'
                    });
                });
            }
        },

        /**
         * 设置为编辑状态
         * @returns {boolean}
         */
        handleEdit() {
            if(!this.authResult.auth_edit) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.type = 'edit';
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * 预览
         */
        handlePreview() {
            let content = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';

            localStorage.setItem('ACTIVITY_AGREEMENT', content);
            const routeData = this.$router.resolve({
                name: 'activityAgreementPreview',
            });

            window.open(routeData.href, 'activityAgreementPreview');
        },

        /**
         * 选择店铺
         * @returns {Promise<void>}
         */
        async handleSelectShop(type = 'add') {
            let selectedData = type === 'add' ? [] : this.ruleForm.shop_nos;
            let result = await shopSelectDialog({
                selectedData,
                shopType: 1
            });

            if(result) {
                this.ruleForm.shop_nos = result;
                this.getPageData();
            }
        },

        /**
         * 处理分页数据
         */
        getPageData() {
            let data = this.getDataPagination(this.filterShop, this.page.now_page, 5);

            this.pageData = data.list;
            this.page.now_page = data.currentPage;
            this.page.total_count = data.total;
            this.page.page_size = data.pageSize;
        },

        /**
         * @name  getDataPagination
         * @desc  前端分页方法
         * @param  {Number} currentPage 当前页码，默认1
         * @param  {Number} pageSize 每页最多显示条数，默认10
         * @param  {Array} totalData 总的数据集，默认为空数组
         * @return {Object} {
                list, //当前页展示数据，数组
                currentPage, //当前页码
                pageSize, //每页最多显示条数
                total, //总的数据条数
            }
         **/
        getDataPagination (totalData = [], currentPage = 1, pageSize = 10) {
            const { length } = totalData;
            const tableData = {
                list: [],
                currentPage,
                pageSize,
                total: length
            };

            if (pageSize >= length) {
                tableData.list = totalData;
                tableData.currentPage = 1;
            } else {
                const num = pageSize * (currentPage - 1);

                if (num < length) {
                    const startIndex = num;
                    const endIndex = num + pageSize - 1;

                    tableData.list = totalData.filter((_, index) => index >= startIndex && index <= endIndex);
                } else {
                    const size = parseInt(length / pageSize);
                    const rest = length % pageSize;

                    if (rest > 0) {
                        tableData.currentPage = size + 1;
                        tableData.list = totalData.filter((_, index) => index >= (pageSize * size) && index <= length);
                    } else if (rest === 0) {
                        tableData.currentPage = size;
                        tableData.list = totalData.filter((_, index) => index >= (pageSize * (size - 1)) && index <= length);
                    }
                }
            }
            return tableData;
        },

        /**
         * 移除商家
         * @param row
         */
        handleRemove(row) {
            this.$zdConfirm('确认移除该商家吗？', '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let index = this.ruleForm.shop_nos.findIndex(item => {
                    return item.shop_no === row.shop_no;
                });

                this.ruleForm.shop_nos.splice(index, 1);
                this.getPageData();
            }).catch(() => {});
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
        }
        .back {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            cursor: pointer;
        }

        /deep/ .el-form {
            .is-required {
                .el-form-item__label {
                    &:before {
                        content: "*";
                        display: inline-block;
                        color: #F56C6C;
                    }
                }
            }
            .image-label {
                .el-form-item__label {
                    margin-top: 40px;
                }
            }
        }

        .form-view {
            background: #FBFBFB;
            border-radius: 2px;
            border: 1px solid #EEEEEE;
            margin: 24px 32px;
            box-sizing: border-box;
            padding: 32px;

            .form-tips {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .radio-wrapper {
                margin-top: 12px;
                .radio-item {
                    margin-bottom: 24px;
                    display: flex;
                    line-height: 18px;
                    align-items: center;
                }
            }
            .task-logo-wrapper {
                /deep/ .pic-view {
                    display: flex;
                    align-items: flex-end;

                    .tips {
                        margin-bottom: 26px;
                    }
                }
            }

            .ueditor-tips {
                width: 862px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FF8E39;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .type-wrapper {
                background: #F7F7F7;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                width: 920px;
                .type-header {
                    height: 54px;
                    padding: 0 24px;
                    border-bottom: 1px solid #DCDFE6;
                    display: flex;
                    align-items: center;
                }
                .type-content {
                    padding: 20px 24px;
                    display: flex;
                    flex-wrap: wrap;
                    .type-item {
                        width: 16.66%;
                        position: relative;
                        .type-label {
                            /*padding: 8px 12px;
                            border: 1px solid #f00;
                            border-radius: 4px;
                            background: #F7F7F7;
                            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);*/
                        }
                        /deep/ .el-checkbox__label {
                            color: #999;
                        }
                        /deep/ .el-checkbox.is-checked {
                            .el-checkbox__label {
                                color: #333333;
                            }
                        }
                        .type-select-count {
                            color: #20A0FF;
                        }
                        .el-icon-caret-bottom {
                            color: #20A0FF;
                            cursor: pointer;
                        }
                        .sub-type-wrapper {
                            z-index: 999;
                            width: 218px;
                            position: absolute;
                            left: 0;
                            top: 40px;
                            display: flex;
                            flex-direction: column;
                            background: #F7F7F7;
                            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
                            padding: 8px 12px;
                            .sub-content {
                                display: flex;
                                flex-wrap: wrap;
                                .sub-type-item {
                                    width: 50%;
                                }
                            }
                        }
                    }
                }
            }

            .form-title {
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #333333;
                padding-bottom: 12px;
                border-bottom: 1px solid #E9E9E9;
                margin-bottom: 24px;
                margin-top: 60px;
            }
            .upload-view {
                display: flex;
                align-items: center;
                /deep/ .el-upload {
                    width: 469px;
                    height: 88px;
                    margin-top: 12px;

                    .el-upload-dragger {
                        width: 469px;
                        height: 88px;
                        border-radius: 4px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 12px;
                        .el-icon-upload {
                            font-size: 48px;
                            color: #C0C4CC;
                            margin: 0 10px 0 0;
                        }

                        .el-upload__text {
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            line-height: 14px;
                        }
                    }
                }
                .el-upload__tip {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    margin-left: 12px;
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }

        .rank-wrapper {
            background: #F7F7F7;
            border-radius: 4px;
            border: 1px solid #EEEEEE;
            display: flex;
            .rank-item {
                flex: 1;
                padding: 20px 16px;
                &:not(&:last-of-type) {
                    border-right: 1px solid #EEEEEE;
                }
                &__title {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
            }
        }

        .award-wrapper {
            background: #F7F7F7;
            border-radius: 4px;
            border: 1px solid #EEEEEE;
            padding: 32px 24px;
            .award-item {
                display: flex;
                align-items: center;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                margin-bottom: 24px;
                span {
                    margin-right: 10px;
                }
                .delete {
                    margin-left: 24px;
                    cursor: pointer;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #666666;
                    user-select: none;
                }
            }
            .add-button {
                width: 120px;
                height: 36px;
                border-radius: 4px;
                border: 1px solid #20A0FF;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #20A0FF;
                background: #fff;
            }
        }

        .shop-wrapper {
            width: 598px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #EEEEEE;
            .shop-header {
                height: 54px;
                background: #FFFFFF;
                border-radius: 4px 4px 0 0;
                border-bottom: 1px solid #EEEEEE;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                padding: 0 35px;
                display: flex;
                align-items: center;
            }
            .shop-content {
                padding: 24px 0 0;
                .btn-view {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 16px;
                    padding: 0 24px;
                }
                .table-wrapper {
                    padding: 0 24px;
                }
                .table-footer {
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 24px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    border-top: 1px solid #EBEEF5;
                    .count {
                        color: #F53341;
                    }
                    .pagination {
                        margin-top: 12px;
                    }
                }
            }
            .shop-content-empty {
                height: 272px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                line-height: normal;
                .empty-title {
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    margin-bottom: 16px;
                }
                .empty-sub-title {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    margin-bottom: 20px;
                }
                .empty-btn {
                    width: 130px;
                    height: 36px;
                    background: rgba(255, 255, 255, 0);
                    border-radius: 4px;
                    border: 1px solid #1890FF;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #1890FF;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }
            }
        }

        /*footer*/

        .footer {
            box-sizing: border-box;
            padding-left: 176px;
            margin-top: 8px;
            margin-bottom: 52px;

            .el-button {
                width: 120px;
                margin: 0 16px 12px;
            }
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0px 1px 0px 0px rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }

    /deep/.edui-default {
        .edui-editor {
            width: 862px!important;
        }
    }
    /deep/ .el-input-number .el-input__inner {
        text-align: left;
    }

    /deep/ .pic-view {
        display: flex;
        align-items: flex-end;

        .tips {
            margin-bottom: 40px;
        }
        .pic-item {
            margin-bottom: 0!important;
        }
        .uploader-customer {
            background: #fff!important;
        }
    }
}

/deep/ .el-table {
    &::before {
        height: 0;
    }
    .el-table__row {
        &:last-of-type {
            td {
                border: none;
            }
        }
    }
    th {
        background: #f2f2f2!important;
        font-size: 14px!important;
        font-family: PingFangSC-Medium, PingFang SC!important;
        font-weight: 500!important;
        color: #333333!important;
        height: 44px!important;
        padding: 0!important;
    }
}
</style>

